<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.space {
				width: 200px;
				margin-top: 60px;
				background: red;
			}
		</style>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>

	<body>
		<div class="camera">
			<div class="space">
				<div class="box1">1</div>
				<div class="box2">2</div>
				<div class="box3">3</div>
				<div class="box4">4</div>
				<div class="box5">5</div>
				<div class="box6">6</div>
			</div>
		</div>
		<!--立方体-->
		<style>
			img {
				width: 100%;
				height: 100%;
			}
			
			.cube {
				margin-top: 50px;
				margin-left: 100px;
				width: 200px;
				height: 200px;
				transform-style: preserve-3d;
				/*perspective: 1000px;*/
				position: relative;
				/*animation: autoRotate 3s linear infinite;*/
			}
			
			.side {
				text-align: center;
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				opacity: .7;
				line-height: 200px;
			}
			
			.front {
				background: red;
				transform: translateZ(100px);
			}
			
			.right {
				background: skyblue;
				transform: rotateY(90deg) translateZ(100px);
			}
			
			.left {
				background: green;
				transform: rotateY(-90deg) translateZ(100px);
			}
			
			.back {
				background: red;
				transform: rotateY(180deg) translateZ(100px);
			}
			
			.top {
				background: firebrick;
				transform: rotateX(90deg) translateZ(100px);
			}
			
			.bottom {
				background: fuchsia;
				transform: rotateX(-90deg) translateZ(100px);
			}
			
			@keyframes autoRotate {
				from {
					transform: rotateY(0) rotateX(0);
				}
				to {
					transform: rotateY(360deg) rotateX(360deg);
				}
			}
		</style>
		<div class="cube">
			<div class="side front"><img src="6.jpg" /></div>
			<div class="side back">3</div>
			<div class="side top">5</div>
			<div class="side bottom">6</div>
			<div class="side left">4</div>
			<div class="side right">2</div>
		</div>

		<script type="text/javascript">
			changeAng(".space");
			changeAng(".cube");
			
			
			function changeAng(divName) {
				var space = document.querySelectorAll(divName);
				if(window.DeviceOrientationEvent) {
					window.addEventListener('deviceorientation', function(event) {
						var alpha = event.alpha,
							beta = event.beta,
							gamma = event.gamma;
						space[0].style.webkitTransform = 'rotateX(' + beta + 'deg) rotateY(' + gamma + 'deg) rotateZ(' + alpha + 'deg)';
						space[0].style.transform = 'rotateX(' + beta + 'deg) rotateY(' + gamma + 'deg) rotateZ(' + alpha + 'deg)';
						space[0].style.mozTransform = 'rotateX(' + beta + 'deg) rotateY(' + gamma + 'deg) rotateZ(' + alpha + 'deg)';
					}, false);
				} else {
					document.querySelector('body').innerHTML = '你的瀏覽器不支援喔';
				}
			}
		</script>
	</body>

</html>